<template>
  <div>
    <div class="header">
      <span>
        <label for="label_1">姓名: </label>
        <el-input
          v-model="search_name"
          placeholder="请输入内容"
          style="width: 200px"
          clearable
          id="label_1"
        ></el-input>
      </span>
      <span style="margin-left: 15px">
        <label for="label_2">用户名: </label>
        <el-input
          v-model="search_username"
          placeholder="请输入内容"
          style="width: 200px; height: 40px"
          clearable
          id="label_2"
        ></el-input>
      </span>
      <span style="margin-left: 15px">
        <label for="label_3">账号状态: </label>
        <el-select v-model="search_status" placeholder="请选择" id="label_3">
          <el-option
            v-for="item in options"
            :key="item.value"
            :value="item.value"
            :label="item.label"
          >
          </el-option>
        </el-select>
      </span>
      <span style="margin-left: 15px">
        <label for="label_4">分组名: </label>
        <el-select v-model="search_groupId" placeholder="请选择" id="label_4">
          <el-option
            v-for="item in group_id_options"
            :key="item.id"
            :value="item.id"
            :label="item.group_name"
          >
          </el-option>
        </el-select>
      </span>

      <span
        ><el-button type="primary" @click="handelSearch" icon="el-icon-search"
          >查询</el-button
        ></span
      >
      <span
        ><el-button type="primary" @click="handleAddUser">新增</el-button></span
      >
    </div>
    <div class="content">
      <el-table
        :data="tableData"
        stripe
        style="width: 100%"
        :row-style="{ height: '32px' }"
        :header-row-style="{ height: '10px' }"
        :cell-style="{ padding: '1px' }"
      >
        <el-table-column prop="name" label="姓名" width="180"></el-table-column>
        <el-table-column
          prop="username"
          label="用户名"
          width="180"
        ></el-table-column>
        <el-table-column
          prop="role_name"
          label="角色名"
          width="180"
        ></el-table-column>
        <el-table-column prop="phone" label="联系方式"></el-table-column>
        <el-table-column prop="qq" label="QQ"></el-table-column>
        <el-table-column prop="group_name" label="分组名"></el-table-column>
        <el-table-column
          prop="is_attention"
          label="关注微信号"
          :formatter="handleFormatAttention"
        ></el-table-column>
        <el-table-column prop="status" label="状态"></el-table-column>
        <el-table-column prop="" label="操作">
          <template slot-scope="scope">
            <i
              class="el-icon-edit"
              @click="handleEdit(scope.$index, scope.row)"
            ></i>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <i
              class="el-icon-delete"
              @click="handleDelete(scope.$index, scope.row)"
            ></i>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="footer">
      <div class="block">
        <el-pagination
          @current-change="handleCurrentChange"
          layout="total, prev, pager, next"
          background
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 存放新增组件 -->
    <div v-show="showAdd">
      <AddUser ref="adduser"></AddUser>
    </div>
    <!-- 存放编辑组件 -->
    <div v-show="showEdit">
      <EditUser ref="edituser"></EditUser>
    </div>
  </div>
</template>

<script>
import AddUser from "./AddUser";
import EditUser from "./EditUser";

export default {
  name: "UserList",
  data() {
    return {
      search_name: "",
      search_username: "",
      search_status: "",
      search_groupId: "",
      group_id_options: [],
      tableData: [],
      options: [
        { value: "1", label: "启用" },
        { value: "2", label: "禁用" },
      ],
      currentPage: 1, // 默认 1
      total: 0,
      showAdd: false,
      showEdit: false,
    };
  },
  methods: {
    handleEdit(index, row) {
      this.showEdit = true;
      this.$refs.edituser.handleOpen(row);
    },
    // 执行删除
    handleDelete(index, row) {
      // console.log(index, row.id);
      this.$confirm("此操作将删除该用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let curUserId = this.COOKIE.get("uid");
        this.AXIOS.post(`/mycrmapi/user/del/${curUserId}/${row.id}`)
          .then((res) => {
            // console.log(res.data.status);
            if (res.data.status === 1) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              // 刷新
              this.handleInitUserListData();
            } else {
              this.$message({
                type: "error",
                message: res.data.msg,
              });
            }
          })
          .catch((err) => {
            console.log(err);
          });
      });
    },
    // 查询
    handelSearch() {
      let searchCondition = {
        page: this.currentPage,
        search_name: this.search_name,
        search_username: this.search_username,
        search_status: this.search_status,
        search_groupId: this.search_groupId,
      };
      // console.log(searchCondition);

      this.AXIOS.get("/mycrmapi/user/list", { params: searchCondition })
        .then((res) => {
          this.tableData = res.data.data;
        })
        .catch((err) => {
          console.error(err);
        });
    },
    // 分页
    handleCurrentChange(curPage) {
      this.handleInitUserListData(curPage);
    },
    // 添加用户界面
    handleAddUser() {
      this.showAdd = true;
      this.$refs.adduser.handleOpen(); // 调用子组件中的 open() 方法
      // 清空选项中的内容
      this.name = "";
      this.username = "";
      this.password = "";
      this.role_id = "";
      this.phone = "";
      this.qq = "";
    },
    // 加载数据
    handleInitUserListData(curPage = 1) {
      // console.log(curPage);
      this.AXIOS.get(`/mycrmapi/user/list?cur_page=${curPage}`)
        .then((res) => {
          // console.log(res.data.data)
          this.tableData = res.data.data;
          this.total = res.data.total;
        })
        .catch((err) => {
          console.error(err);
        });

      // 获取分组名
      this.AXIOS.get("/mycrmapi/user/getGroupInfo")
        .then((resp) => {
          console.log(resp.data.data);
          this.group_id_options = resp.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    handleFormatAttention(row, column) {
      let msg = "";
      if (row.is_attention === 1) {
        msg = "已关注";
      } else {
        msg = "未关注";
      }
      return msg;
    },
  },
  components: {
    AddUser,
    EditUser,
  },

  // 加载页面数据
  mounted() {
    this.handleInitUserListData();
  },
};
</script>

<style scoped>
.header {
  text-align: left;
  /* font-weight: bold; */
}

.content {
  margin-top: 40px;
}

.footer {
  position: fixed;
  bottom: 15px;
  left: 200px;
}
</style>
